<!DOCTYPE html>
<html lang="es">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <!-- Title -->
    <title>{{ project_name }} | {% block title %}{% endblock %}</title>
    <!-- Description, Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">

    <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,800" rel="stylesheet" type="text/css">
    <!-- Stylesheets -->
    <link href="{{STATIC_URL}}bootstrap_old/bootstrap.css" rel="stylesheet">
    <link href="{{STATIC_URL}}bootstrap_old/bootstrap-responsive.css" rel="stylesheet">
    <link href="{{STATIC_URL}}css/flexslider.css" rel="stylesheet">
    <link href="{{STATIC_URL}}prettyPhoto/css/prettyPhoto.css" rel="stylesheet">
    <link rel="stylesheet" href="{{STATIC_URL}}css/FontAwesome/css/font-awesome.css">
    <!--[if IE 7]>
        <link rel="stylesheet" href="{{STATIC_URL}}css/font-awesome-ie7.css">
    <![endif]-->
    <link href="{{STATIC_URL}}css/style.css" rel="stylesheet">


    <!-- HTML5 Support for IE -->
    <!--[if lt IE 9]>
        <script src="{{STATIC_URL}}js/html5shim.js"></script>
    <![endif]-->

    <!-- Favicon -->
    <link rel="shortcut icon" href="{{STATIC_URL}}image/logo_equo/favicon/favicon.png">
</head>
<body>

    {% include "base/header.html" %}

    {% if active != 'index' %}
        <!-- Start page header -->
{#        <section class="section-page-header">#}
{#            <div class="container">#}
{#                <div class="row">#}
{#                    <div class="span12">#}
{#                        <div class="page-header">#}
{#                            <h4>—— {% block page-header %}{% endblock %} ——</h4>#}
{#                        </div><img src="{{ STATIC_URL }}image/divider_shadow.png" title="" alt="">#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
{#        </section>#}
        <!-- End page header -->
    {% endif %}

    {% block content %}{% endblock %}

    {% include "base/footer.html" %}

    <section js>
        <script src="{{STATIC_URL}}js/jquery.js"></script>
        <script src="{{STATIC_URL}}js/validate/jquery.validate.js"></script>
        <script src="{{STATIC_URL}}bootstrap_old/bootstrap.js"></script>
        <script src="{{STATIC_URL}}js/jquery.flexslider-min.js"></script>
        <script src="{{STATIC_URL}}js/jquery.isotope.js"></script>
        <script src="{{STATIC_URL}}prettyPhoto/js/jquery.prettyPhoto.js"></script>
        <script src="{{STATIC_URL}}js/filter.js"></script>
        <script src="{{STATIC_URL}}js/jquery.tweet.js"></script>
        <script src="{{STATIC_URL}}js/custom.js"></script>
        <script type="text/javascript">
            $(function () {
                $("[rel='tooltip']").tooltip();
            });
        </script>

        <script type="text/javascript">
            $(document).ready(function(){
                $('#contact-form').validate({

                    rules: {
                        name: {
                            minlength: 10,
                            required: true
                        },
                        email: {
                            required: true,
                            email: true
                        },
                        telephone: {
                            minlength: 7,
                            number: true,
                            required: true
                        },
                        message: {
                            minlength: 20,
                            required: true
                        }
                    },
                    messages: {
                        //nombre: "Ingrese su nombre por favor",
                        name: {
                            required: "Ingrese su nombre por favor",
                            minlength: "Ingrese su nombre completo"
                        },
                        telephone: {
                            required: "Ingrese su teléfono por favor",
                            number: "Ingrese solamente números",
                            minlength: "Ingrese un número telefónico válido"
                        },
                        email: {
                            required: "Ingrese su correo electrónico",
                            email: "El email no es válido"
                        },
                        message: {
                            required: "Ingrese un comentario por favor",
                            minlength: "Ingrese un mensaje mas descriptivo"
                        }
                    },
                    //debug:true, // True para no enviar el formulario
                    errorClass: "control-group error",
                    validClass: "control-group info",
                    errorElement: "span",
                    highlight: function(element, errorClass, validClass) {
                        if (element.type === 'radio') {
                            this.findByName(element.name ).closest(".control-group").removeClass(validClass).addClass(errorClass);
                        } else {
                            $(element).closest(".control-group").removeClass(validClass).addClass(errorClass);
                        }
                    },
                    unhighlight: function(element, errorClass, validClass) {
                        if (element.type === 'radio') {
                            this.findByName(element.name ).closest(".control-group").removeClass(errorClass).addClass(validClass);
                        } else {
                            $(element).closest(".control-group").removeClass(errorClass).addClass(validClass);
                        }
                    } ,
                    submitHandler: function(form){
                        //      alert('El formulario ha sido validado correctamente!');
                        form.submit(); // Necesario para enviar el formulario. No es necesario en caso de quitar submitHandler
                        $('.btn').button('loading');
                    }

                }); // end ('#contact-form').validate
            });
        </script>
        <script type="text/javascript">
            /* Flex Slider */
            $(window).load(function() {
                $('.flexslider').flexslider({
                    animation: "slide",
                    controlNav: true,
                    pauseOnHover: true,
                    slideshowSpeed: 8000
                });
            });
        </script>
    </section>

</body>
</html>